/* ==== v-table ==== */

.v-table {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: @white;
  border: 1px solid @table-border-color;
  font-size: @font-size-base;
  color: @table-text-color;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: @table-border-color;
    z-index: 1;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: @table-border-color;
    z-index: 1;
  }

  .v-tooltip.cell {
    white-space: nowrap;
    min-width: 50px;
  }

  &__empty-block {
    position: relative;
    min-height: 50px;
    text-align: center;
    width: 100%;
    height: 100%;
  }

  &__empty-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: @gray;
    font-size: 13px;
  }

  &__expand-column {
    .cell {
      padding: 0;
      text-align: center;
    }
  }

  &__expand-icon {
    position: relative;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    transition: transform 0.2s ease-in-out;
    height: 40px;

    &--expanded {
      transform: rotate(90deg);
    }

    > .v-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -5px;
      margin-top: -5px;
    }
  }

  &__expanded-cell {
    padding: 20px 50px;
    background-color: @dark-white;
    box-shadow: inset 0 2px 0 #f4f4f4;

    &:hover {
      background-color: @dark-white !important;
    }
  }

  &--fit {
    border-right: 0;
    border-bottom: 0;

    th.gutter, td.gutter {
      border-right-width: 1px;
    }
  }

  th {
    white-space: nowrap;
    overflow: hidden;
    font-weight: normal;
  }

  th, td {
    height: 40px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;

    &.is-center {
      text-align: center;
    }

    &.is-eft {
      text-align: left;
    }

    &.is-right {
      text-align: right;
    }
  }

  th.is-leaf, td {
    border-bottom: 1px solid @table-border-color;
  }

  th.is-sortable {
    cursor: pointer;
  }

  &--border {
    th, td {
      border-right: 1px solid @table-border-color;
    }

    th {
      border-bottom: 1px solid @table-border-color;
    }
  }

  &--hidden {
    visibility: hidden;
  }

  th {
    background-color: @table-header-background;
    text-align: left;
  }

  th > div {
    display: inline-block;
    padding-left: 18px;
    padding-right: 18px;
    line-height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  td > div {
    box-sizing: border-box;
  }

  &__fixed, &__fixed-right {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 1px 0 8px #d3d4d6;
    overflow-x: hidden;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: @table-border-color;
      z-index: 4;
    }
  }

  &__fixed-right-patch {
    position: absolute;
    top: -1px;
    right: 0;
    background-color: @table-header-background;
    border-bottom: 1px solid @table-border-color;
  }

  &__fixed-right {
    top: 0;
    left: auto;
    right: 0;
    box-shadow: -1px 0 8px #d3d4d6;
    .v-table__fixed-header-wrapper,
    .v-table__fixed-body-wrapper,
    .v-table__fixed-footer-wrapper {
      left: auto;
      right: 0;
    }
  }

  &__fixed-header-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;

    & thead div {
      background-color: @table-header-background;
      color: @table-text-color;
    }
  }

  &__fixed-footer-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;

    & tbody td {
      border-top: 1px solid @table-border-color;
      background-color: @table-footer-background;
      color: @table-text-color;
    }
  }

  &__fixed-body-wrapper {
    position: absolute;
    left: 0;
    top: 37px;
    overflow: hidden;
    z-index: 3;
  }

  &__header-wrapper, &__body-wrapper, &__footer-wrapper {
    width: 100%;
  }

  &__footer-wrapper {
    margin-top: -1px;
    td {
      border-top: 1px solid var(--table-border-color);
    }
  }

  &__header, &__body, &__footer {
    table-layout: fixed;
  }

  &__header-wrapper, &__footer-wrapper {
    overflow: hidden;

    thead div {
      background-color: @table-header-background;
      color: @table-text-color;
    }

    tbody td {
      background-color: @table-footer-background;
      color: @table-text-color;
    }
  }

  &__body-wrapper {
    overflow: auto;
    position: relative;
    &.is-scroll-none {
      ~ .v-table__fixed,
      ~ .v-table__fixed-right {
        box-shadow: none;
      }
    }

    &.is-scroll-left {
      ~ .v-table__fixed {
        box-shadow: none;
      }
    }

    &.is-scroll-right {
      ~ .v-table__fixed-right {
        box-shadow: none;
      }
    }

    .v-table--border {
      &.is-scroll-right {
        ~ .v-table__fixed-right {
          border-left: @table-border-color;
        }
      }

      &.is-scroll-left {
        ~ .v-table__fixed {
          border-right: @table-border-color;
        }
      }
    }
  }

  th.required > div::before {
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d51;
    margin-right: 5px;
    vertical-align: middle;
  }

  th > .cell {
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;

    &.highlight {
      color: @color-primary;
    }
  }

  .caret-wrapper {
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -2px;
    width: 16px;
    height: 30px;
    overflow: initial;
  }

  .sort-caret {
    display: inline-block;
    width: 0;
    height: 0;
    border: 0;
    content: "";
    position: absolute;
    left: 3px;
    z-index: 2;

    &.ascending {
      top: 9px;
      border-top: none;
      border-right: 5px solid transparent;
      border-bottom: 5px solid @light-silver;
      border-left: 5px solid transparent;
    }

    &.descending {
      bottom: 9px;
      border-top: 5px solid @light-silver;
      border-right: 5px solid transparent;
      border-bottom: none;
      border-left: 5px solid transparent;
    }
  }

  .ascending .sort-caret.ascending {
    border-bottom-color: @extra-light-black;
  }

  .descending .sort-caret.descending {
    border-top-color: @extra-light-black;
  }

  th.gutter, td.gutter {
    width: 15px;
    border-right-width: 0;
    border-bottom-width: 0;
    padding: 0;
  }

  td.gutter {
    width: 0;
  }

  td.is-hidden, th.is-hidden {
    > * {
      visibility: hidden;
    }
  }

  .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 24px;
    padding-left: 18px;
    padding-right: 18px;
  }

  tr input[type="checkbox"] {
    margin: 0;
  }

  tr {
    background-color: @white;
  }

  &--striped {
    .v-table__body {
      tr.v-table__row--striped {
        td {
          background: #FAFAFA;
          background-clip: padding-box;
        }
        &.current-row td {
          background: #edf7ff;
        }
      }
    }
  }

  &__body {
    tr.hover-row {
      &, &.v-table__row--striped {
        &, &.current-row {
          > td {
            background-color: @extra-light-gray;
          }
        }
      }
    }

    tr.current-row > td {
      background: #edf7ff;
    }
  }

  &__column-resize-proxy {
    position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid @table-border-color;
    z-index: 10;
  }

  .hidden-columns {
    visibility: hidden;
    position: absolute;
    z-index: -1;
  }

  &__column-filter-trigger {
    display: inline-block;
    line-height: 34px;
    margin-left: 5px;
    cursor: pointer;

    i {
      color: @light-silver;
    }
  }

  &--nable-row-transition {
    .v-table__body td {
      transition: background-color .25s ease;
    }
  }

  &--enable-row-hover {
    .v-table__body tr:hover > td {
      background-color: @table-hover-background;
      background-clip: padding-box;
    }
  }

  &--fluid-height {
    .v-table__fixed,
    .v-table__fixed-right {
      bottom: 0;
      overflow: hidden;
    }
  }
}
